<template>
 <div class="order">
   <loading :show="isLoading" text="正在提交..."></loading>
   <alert v-model="alertShow" title="错误" :content="errMsg"></alert>
   <toast v-model="isSubmitSuccess" type="success" width="9em" text="订单提交成功<br/>即将返回详情页..."></toast>

   <div class="header">
     <div class="logo">
       <img src="../../assets/img/home/logo.png" alt="">
     </div>
   </div>
   <div class="product-info">
     <div class="img-box">
       <img src="../../assets/img/home/detail_banner.png" alt="">
     </div>
     <div class="text">
       <div class="title">万福精瘦肉</div>
       <div class="price">8.8元/斤</div>
     </div>
   </div>
   <div class="form-group">
     <group title="请输入购买信息">
       <x-input title="姓名" placeholder="请输入姓名" v-model="formData.user_name"></x-input>
       <x-input title="电话" placeholder="请输入电话" v-model="formData.user_mobile"></x-input>
       <x-input title="数量" placeholder="请输入购买数量" v-model="formData.count" >
         <span slot="right">斤</span>
       </x-input>
       <x-input title="地址" placeholder="请输入地址" v-model="formData.address"></x-input>
       <div class="btn-group">
         <x-button type="primary" @click.native="handleSubmit" text="提交订单"></x-button>
       </div>

     </group>
   </div>

   <div class="total-price"><b>总价为： </b><span>0.00</span> 元  </div>
 </div>
</template>

<script>
  import { XInput, Group, XButton, Loading, Toast, Alert } from 'vux'

  export default {
    name: 'index',
    components: {
      XInput,
      Group,
      XButton,
      Loading,
      Toast,
      Alert
    },
    data () {
      return {
        formData: {},
        isSubmitSuccess: false,
        isLoading: false,
        alertShow: false,
        errMsg: '所有内容不能为空！'
      }
    },
    methods: {
      handleSubmit () {
        if (this.valiFormData(this.formData)) {
          var reg = /^(\+86|0086)?\s*1[34578]\d{9}$/ig
          if (reg.test(this.formData.user_mobile)) {
            this.isLoading = true
            var _this = this
            setTimeout(() => {
              _this.isLoading = false
              _this.isSubmitSuccess = true
              setTimeout(() => {
                _this.$router.back(-1)
              }, 2000)
            }, 2000)
          } else {
            this.errMsg = '请输入正确格式的手机号码！'
            this.alertShow = true
          }
        } else {
          this.alertShow = true
        }
      },
      valiFormData (data) {
        if (data.user_name &&
          data.user_mobile &&
          data.address &&
          data.count) {
          return true
        } else {
          return false
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .header {
    height: auto;
    background-image: url('../../assets/img/home/header-bg_02.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    .logo {
      margin-left: 15px;
      padding-top: 10px;
      padding-bottom: 15px;
    }
  }
  .product-info {
    box-sizing: border-box;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    heihgt: 100px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(170, 170, 170, 1);
    .img-box img{
      width: 80px;
      height: 80px;
    }
    .text {
      margin-left: 20px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 18px;
        font-weight: 600;
      }
      .price {
        align-self: flex-end;
        font-size: 16px;
      }
    }
  }
  .total-price {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    font-size: 18px;
    border-top: 1px solid #ccc;
    text-align: right;
    position: fixed;
    bottom: 60px;
    right: 0;
    span {
      font-size: 22px;
      color: #f00;
    }
  }
</style>
